import React, { useState, useEffect, useRef } from 'react';
import * as d3 from 'd3';
import { useModel } from '@umijs/max';
import styles from './Centerr.less';

const Centerr: React.FC = () => {
    const { detailData } = useModel('global');  // 从全局模型中获取数据

    const [selectedYear, setSelectedYear] = useState<string>("2024");
    const [selectedProvince, setSelectedProvince] = useState<string>("北京");
    const svgRef = useRef<SVGSVGElement | null>(null);

    // 提取所有独立的年份和省份
    const years = Array.from(new Set(detailData.map(d => d.year)));
    const provinces = Array.from(new Set(detailData.map(d => d.province)));

    // 过滤选定年份和省份的数据
    const filteredData = detailData.filter(
        (d) => d.year === selectedYear && d.province === selectedProvince
    );

    // 用于裁剪专业名称的函数
    const trimProname = (proname: string) => {
        if (proname.match('高新舰船与海洋装备智能设计与管理')) {
            return '海洋智能设计与管理';
        }

        const match = proname.match(/\(([^)]+)\)/); // 匹配括号内的内容
        return match ? match[1] : proname;  // 如果找到括号内的内容，返回该内容，否则返回原字符串
    };

    useEffect(() => {
        if (!svgRef.current) return;

        // 清空 svg 内容
        d3.select(svgRef.current).selectAll('*').remove();

        const margin = { top: 10, right: 30, bottom: 100, left: 50 }; // 调整左边和底部边距
        const width = 1330 - margin.left - margin.right;
        const height = 300 - margin.top - margin.bottom;

        const svg = d3.select(svgRef.current)
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', `translate(${margin.left},${margin.top})`);

        const pronames = Array.from(new Set(filteredData.map(d => d.proname))); // 获取所有的专业名称
        const trimmedPronames = pronames.map(trimProname);  // 裁剪后的专业名称

        const xScale = d3.scaleBand()
            .domain(trimmedPronames)  // 使用裁剪后的专业名称
            .range([0, width])
            .padding(0.1); // 设置条形之间的间距

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(filteredData, (d: { detailValue: string | number; }) => +d.detailValue)!]) // 招生人数的最大值
            .nice()
            .range([height, 0]); // 设置y轴的范围

        // 定义渐变色
        const gradient = svg.append('defs')
            .append('linearGradient')
            .attr('id', 'gradient')
            .attr('x1', '0%')
            .attr('y1', '0%')
            .attr('x2', '100%')
            .attr('y2', '100%');
        
        gradient.append('stop')
            .attr('offset', '0%')
            .attr('stop-color', '#6a5acd')
            .attr('stop-opacity', 1);

        gradient.append('stop')
            .attr('offset', '100%')
            .attr('stop-color', '#00bfff')
            .attr('stop-opacity', 1);

        // 绘制柱状图
        svg.selectAll('.bar')
            .data(filteredData)
            .join('rect')
            .attr('class', 'bar')
            .attr('x', (d: any) => xScale(trimProname(d.proname)))  // 设置条形的横坐标
            .attr('y', height) // 初始位置在底部
            .attr('width', xScale.bandwidth()) // 设置条形的宽度
            .attr('height', 0) // 初始高度为0
            .attr('fill', 'url(#gradient)')  // 使用渐变色
            .transition()  // 添加过渡动画
            .duration(1000) // 动画持续时间为1秒
            .attr('y', (d: any) => yScale(+d.detailValue)) // 动画目标位置
            .attr('height', (d: any) => height - yScale(+d.detailValue)); // 动画目标高度

        // 添加x轴（竖直显示）
        const xAxis = svg.append('g')
            .attr('transform', `translate(0, ${height})`)
            .call(d3.axisBottom(xScale));

        xAxis.selectAll('text')
            .style('text-anchor', 'middle')
            .style('font-size', '12px')  // 设置字体大小
            .each(function(this: SVGTextElement) {  // 明确指定 this 为 SVGTextElement
                const text = d3.select(this);
                // 获取文本的宽度
                const textWidth = text.node()!.getComputedTextLength();  // 使用非空断言来告诉 TypeScript `this` 不是 null
                // 根据文本的宽度来调整平移量
                const translateY = textWidth > 80 ? 40 : 20;  // 你可以根据实际需要调整这个阈值和偏移量
                // 应用平移
                text.attr('transform');
            });

        // 添加y轴
        svg.append('g')
            .call(d3.axisLeft(yScale));

        // 添加标题
        svg.append('text')
            .attr('x', width / 2)
            .attr('y', -10)
            .attr('text-anchor', 'middle')
            .style('font-size', '16px')

    }, [filteredData, selectedYear, selectedProvince]);

    return (
        <div>
            <div>
                <label>选择年份: </label>
                <select onChange={(e) => setSelectedYear(e.target.value)} value={selectedYear}>
                    {years.map(year => (
                        <option key={year} value={year}>{year}</option>
                    ))}
                </select>
            </div>
            <div>
                <label>选择省份: </label>
                <select onChange={(e) => setSelectedProvince(e.target.value)} value={selectedProvince}>
                    {provinces.map(province => (
                        <option key={province} value={province}>{province}</option>
                    ))}
                </select>
            </div>
            <svg ref={svgRef}></svg>
        </div>
    );
};

export default Centerr;
